<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>粒子特效倒计时</title>
    <style>
        body {
            margin: 0;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #000;
            font-family: 'Arial', sans-serif;
            overflow: hidden;
        }

        #particles-js {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .countdown-container {
            position: relative;
            z-index: 2;
            text-align: center;
            padding: 2rem;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 20px;
            backdrop-filter: blur(5px);
        }

        .title {
            color: #fff;
            margin-bottom: 2rem;
            font-size: 2em;
            text-shadow: 0 0 10px rgba(255,255,255,0.5);
        }

        .numbers-container {
            display: flex;
            gap: 20px;
            justify-content: center;
        }

        .unit-container {
            position: relative;
            width: 120px;
            text-align: center;
        }

        .number {
            font-size: 4em;
            font-weight: bold;
            color: #fff;
            text-shadow: 0 0 20px rgba(255,255,255,0.8);
            transition: all 0.3s ease;
        }

        .label {
            color: #fff;
            font-size: 1.2em;
            margin-top: 10px;
            opacity: 0.8;
        }

        .particle {
            position: absolute;
            pointer-events: none;
            opacity: 0;
        }

        @keyframes particleAnimation {
            0% {
                transform: translate(0, 0) scale(1);
                opacity: 1;
            }
            100% {
                transform: translate(var(--tx), var(--ty)) scale(0);
                opacity: 0;
            }
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .numbers-container {
                flex-wrap: wrap;
            }
            .unit-container {
                width: 80px;
            }
            .number {
                font-size: 2.5em;
            }
        }
    </style>
</head>
<body>
    <div id="particles-js"></div>
    <div class="countdown-container">
        <h1 class="title">2025年春节倒计时</h1>
        <div class="numbers-container">
            <div class="unit-container">
                <div class="number" id="days">00</div>
                <div class="label">天</div>
            </div>
            <div class="unit-container">
                <div class="number" id="hours">00</div>
                <div class="label">时</div>
            </div>
            <div class="unit-container">
                <div class="number" id="minutes">00</div>
                <div class="label">分</div>
            </div>
            <div class="unit-container">
                <div class="number" id="seconds">00</div>
                <div class="label">秒</div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <script>
        // 粒子背景配置
        particlesJS('particles-js', {
            particles: {
                number: {
                    value: 80,
                    density: {
                        enable: true,
                        value_area: 800
                    }
                },
                color: {
                    value: '#ffffff'
                },
                shape: {
                    type: 'circle'
                },
                opacity: {
                    value: 0.5,
                    random: true
                },
                size: {
                    value: 3,
                    random: true
                },
                line_linked: {
                    enable: true,
                    distance: 150,
                    color: '#ffffff',
                    opacity: 0.4,
                    width: 1
                },
                move: {
                    enable: true,
                    speed: 2,
                    direction: 'none',
                    random: true,
                    straight: false,
                    out_mode: 'out',
                    bounce: false
                }
            },
            interactivity: {
                detect_on: 'canvas',
                events: {
                    onhover: {
                        enable: true,
                        mode: 'repulse'
                    },
                    onclick: {
                        enable: true,
                        mode: 'push'
                    },
                    resize: true
                }
            },
            retina_detect: true
        });

        function createParticles(element, oldValue, newValue) {
            const rect = element.getBoundingClientRect();
            const particleCount = 20;
            
            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.left = rect.left + rect.width / 2 + 'px';
                particle.style.top = rect.top + rect.height / 2 + 'px';
                particle.style.setProperty('--tx', (Math.random() - 0.5) * 100 + 'px');
                particle.style.setProperty('--ty', (Math.random() - 0.5) * 100 + 'px');
                particle.style.animation = 'particleAnimation 1s ease-out forwards';
                particle.style.background = `hsl(${Math.random() * 360}, 100%, 50%)`;
                particle.style.width = '4px';
                particle.style.height = '4px';
                particle.style.borderRadius = '50%';
                document.body.appendChild(particle);
                
                setTimeout(() => {
                    document.body.removeChild(particle);
                }, 1000);
            }
        }

        function updateNumber(element, value, oldValue) {
            if (oldValue !== value) {
                createParticles(element, oldValue, value);
                element.textContent = value.toString().padStart(2, '0');
                element.style.transform = 'scale(1.2)';
                setTimeout(() => {
                    element.style.transform = 'scale(1)';
                }, 200);
            }
        }

        function updateCountdown() {
            const targetDate = new Date('2026-02-17T00:00:00'); // 2026年春节
            const now = new Date();
            const diff = targetDate - now;

            if (diff <= 0) {
                document.querySelector('.title').textContent = '新年快乐！';
                return;
            }

            const days = Math.floor(diff / (1000 * 60 * 60 * 24));
            const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((diff % (1000 * 60)) / 1000);

            const elements = {
                days: document.getElementById('days'),
                hours: document.getElementById('hours'),
                minutes: document.getElementById('minutes'),
                seconds: document.getElementById('seconds')
            };

            updateNumber(elements.days, days, elements.days.textContent);
            updateNumber(elements.hours, hours, elements.hours.textContent);
            updateNumber(elements.minutes, minutes, elements.minutes.textContent);
            updateNumber(elements.seconds, seconds, elements.seconds.textContent);
        }

        // 初始更新
        updateCountdown();
        // 每秒更新一次
        setInterval(updateCountdown, 1000);
    </script>
</body>
</html>
